<template>
  <h2>当前求和：{{ sum }}</h2>
  <button @click="sum++">点击+1</button>
</template>
<script>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
export default {
  name: "Demo",

  setup(props, context) {
    console.log("---setup---");

    // 数据
    let sum = ref(0);

    // 通过组合式API形式使用生命钩子
    // 比在setup外部的生命钩子先执行
    onBeforeMount(() => {
      console.log("---onBeforeMount---");
    });
    onMounted(() => {
      console.log("---onMounted---");
    });
    onBeforeUpdate(() => {
      console.log("---onBeforeUpdate---");
      console.log(sum);
      // debugger
    });
    onUpdated(() => {
      console.log("---onUpdated---");
      console.log(sum);
      // debugger
    });
    onBeforeUnmount(() => {
      console.log("---onBeforeUnmount---");
    });
    onUnmounted(() => {
      console.log("---onUnmounted---");
    });

    // 返回一个对象供模版使用
    return {
      sum,
    };
  },
  // 通过配置项形式使用生命钩子
  //#region
  // beforeCreate() {
  //   console.log("beforeCreate");
  //   // console.log(this.sum);
  //   // debugger
  // },
  // created() {
  //   console.log("created");
  //   // console.log(this.sum);
  //   // debugger
  // },
  // beforeMount() {
  //   console.log("beforeMount");
  // },
  // mounted() {
  //   console.log("mounted");
  // },
  // beforeUpdate() {
  //   console.log("beforeUpdate");
  //   // console.log(this.sum);
  // },
  // updated() {
  //   console.log("updated");
  //   // console.log(this.sum);
  // },
  // beforeUnmount() {
  //   console.log("beforeUnmount");
  // },
  // unmounted() {
  //   console.log("unmounted");
  // },
  //#endregion
};
</script>

